<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/admin/css/pearForm.css}"/>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

</head>
<body>

<div class="layui-container" style="font-family: Roboto,serif;font-size: 15px">

    <label>双击格式化JSON</label>

    <div class="layui-form-item layui-form-text">
        <div class="layui-input-block">
                <textarea name="desc" id="json_text_input" placeholder="请输入JSON"
                          class="layui-textarea" cols=20 rows=15></textarea>
        </div>
    </div>

</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/admin/js/jquery.js}"></script>


<script type="text/javascript" th:inline="javascript">

    function getJSONValue() {
        return $('#json_text_input').val();
    }

    layui.use(['layer', 'form', 'element', 'jquery'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;

        $('textarea').dblclick(function (event) {
            var ugly = $('#json_text_input').val();
            if (ugly !== '') {
                try {
                    var obj = JSON.parse(ugly);
                    var pretty = JSON.stringify(obj, undefined, 4);
                    console.info(pretty)
                    $('#json_text_input').val(pretty)
                } catch (e) {
                    layer.msg("JSON字符串错误，请检查")
                }
            }
        })
    });

</script>

</body>
</html>